import React from 'react'
import { Space, Table, Tag, Button, Modal, Form, Input, Checkbox } from 'antd';
import { useEffect, useState, useRef } from "react"
import axios from 'axios';
import { Breadcrumb } from 'antd';

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];
function Dh1(props) {
  let formRef = useRef(null)
  let [arr, setArr] = useState([])
  let [isEdit, setIsedit] = useState("新增")
  let [editIndex, setediIndex] = useState(0) // 用来记录修改哪一条的
  let [delIndex, setDelIndex] = useState(0) // 用来记录删除哪一条的
  const [isModalVisible1, setIsModalVisible1] = useState(false)
  const [isModalVisible, setIsModalVisible] = useState(false);
  const onFinish = (values) => {
    // 在这个方法中区分是新增还是编辑
    values.key = Math.random()
    if (isEdit === "新增") {
      let newarr = [...arr]
      newarr.unshift(values)
      setArr(newarr)

    } else {
      let newARR = [...arr]
      newARR[editIndex] = values
      setArr(newARR)
    }
    setIsModalVisible(false)
    formRef.current.resetFields()

  };
  const handleOk1 = () => {
    let newArr = [...arr]
    newArr.splice(delIndex, 1)
    setArr(newArr)
    setIsModalVisible1(false)

  }
  const handleCancel1 = () => {
    setIsModalVisible1(false)
  }
  const delfn = (index) => {
    console.log(index);
    setIsModalVisible1(true)
    setDelIndex(index)

  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const showModal = () => { // 点击新增得事件
    setIsModalVisible(true);
    formRef.current.resetFields() // 点击新增的时候不需要回显，我们清空掉表单里的值
    setIsedit("新增")
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const editfn = (item, index) => {
    console.log(item, index);
    setIsModalVisible(true)
    setIsedit("编辑")
    setediIndex(index)
    formRef.current.setFieldsValue(item) // 设置表单的值
  }
  const goDetail = (id) => {
    console.log(props, 111);
    props.history.push({
      pathname: "/detail",
      state: {
        item: id
      }
    })
  }

  let [columns, setColums] = useState([
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',

    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: "日期",
      dataIndex: 'date',
      key: "date"
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record, index) => (
        <Space size="middle">
          <a onClick={() => editfn(record, index)}>编辑</a>
          <a onClick={() => delfn(index)}>Delete</a>
        </Space>
      ),
    },
    {
      title: '跳转详情',
      key: 'detail',
      render: (_, record, index) => (
        <Space size="middle">
          <a onClick={() => { goDetail(record) }}>详情</a>

        </Space>
      ),
    },
  ])
  useEffect(() => {
    axios.get("/list").then(res => {
      setArr(res.data)
    })
  }, [])
  return (
    <div>
      <Breadcrumb>
        <Breadcrumb.Item>
          <a href="">导航1</a>
        </Breadcrumb.Item>
        <Breadcrumb.Item>
          <a href="">导航1</a>
        </Breadcrumb.Item>
      </Breadcrumb>

      <Button type="primary" style={{ marginLeft: "20px" }} onClick={showModal}>Primary Button</Button>
      <Table columns={columns} dataSource={arr} style={{ marginTop: '20px' }} />
      <Modal footer={null} forceRender title={isEdit} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <Form
          ref={formRef}
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="姓名"
            name="name"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="地址"
            name="address"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="日期"
            name="date"
          >
            <Input />
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      {/* 删除的model */}
      <Modal title="Basic Modal" visible={isModalVisible1} onOk={handleOk1} onCancel={handleCancel1}>
        <p>您确定要删除吗?</p>
      </Modal>
    </div>
  )
}

export default Dh1